<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>第一个数：<input type="text" id="num1"> </p>
    <p>第二个数：<input type="text" id="num2"> </p>
    <p>
        <button id="btn1">+</button>
        <button id="btn2">-</button>
        <button id="btn3">*</button>
        <button id="btn4">/</button>
    </p>
    <p>结果：<input type="text" id="num3"></p>
    <!-- 
        input:标签名，元素对象，对象
        type="text" id="num1" : 标签里面的属性，就是元素对象的属性。
     -->
</body>

</html>
<script>
    // 1.为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？
    // var day = parseInt(89 / 24);
    // var hour = 89 % 24;
    // document.write('为抵抗洪水，战士连续作战89小时，编程计算共' + day + '天零' + hour + '小时')

    // var time = window.prompt('请输入战士连续作战的时间(小时):'); //prompt里面的值是字符串类型。
    // var day = parseInt(time / 24);
    // var hour = time % 24;
    // document.write('为抵抗洪水，战士连续作战' + time + '小时，编程计算共' + day + '天零' + hour + '小时')

    // 2.计算两个文本框里面值的和 - 扩展
    // 2.1如何获取标签 - 通过id名称获取,id名称等于获取了这个标签。
    // alert(num1); //[object HTMLInputElement](标签对象，元素对象)
    // alert(num1.type); //获取标签对象的属性值
    // alert(num1.value);//获取标签对象的属性值

    // 2.2给标签添加行为 - 被动的方法。
    // num1.onclick = function() { //点击num1标签，执行后面大括号里面的代码
    //     alert('你点到我了');
    // }

    //文本框里面的值都是字符串格式。
    btn1.onclick = function() {
        // num3.value = +num1.value + +num2.value;
        // num3.value = parseFloat(num1.value) + parseFloat(num2.value);
        // num3.value = Number(num1.value) + Number(num2.value);
    }
</script>